/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./src/components/Blog/style.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
#blog {
   padding: 120px 0px 60px 0px;
}

@media(max-width:1366px) {
   .blog {
      padding: 30px 0px;
   }

   #blog {
      padding: 120px 15px 60px 15px;
   }
}

img {
   max-width: 100%;
   display: block;
   -o-object-fit: cover;
      object-fit: cover;
}

.card__header img {
   height: 350px !important;
   -o-object-fit: cover;
      object-fit: cover;
   width: 100%;
   border-radius: 8px;
   transition: .3s ease-in-out;
}

.card__header img:hover {
   transform: translateY(-5px)
}

.card__body {
   padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: .5rem;
}


.tag {
   align-self: flex-start;
   padding: .25em .75em;
   border-radius: 1em;
   font-size: .75rem;
}

.tag+.tag {
   margin-left: .5em;
}

.tag-blue {
   background: #56CCF2;
   background: linear-gradient(to bottom, #2F80ED, #56CCF2);
   color: #fafafa;
}

.card__body h4 {
   font-size: 1.5rem;
   text-transform: capitalize;
}

.card {
   position: relative;
}

.card__footer {
   display: flex;
   padding: 1rem;
   margin-top: auto;
}


.user {
   display: flex;
   gap: .5rem;
   align-items: center;
}

.user__image {
   border-radius: 50%;
}

.user__info>small {
   color: #666;
}